<div id="container">
    <div class="content">
        <form method="post" id="submit" name="submit">
            <div class="overview-left form-control">
                <h3>Thông tin tài khoản</h3>
                <div class="form-group">
                    <label class="label">Tài khoản</label>
                    <div class="col-reg">
                        <input id="username" autocomplete="off" class="input" name="username" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="label">Mật mã</label>
                    <div class="col-reg">
                        <input id="password" class="input" name="password" type="password">
                    </div>
                </div>
                <div style="margin-left: 15%">
                    <label style="display: none" class="login-error-notice">Tài khoản hoặc mật khẩu không hợp lệ</label>
                </div>
                <div class="form-group">
                    <div class="form-submit">
                        <input id="loginAccount" class="btn" type="button" value="Đăng nhập">
                    </div>
                </div>
                <h3>Nếu bạn có tài khoản Facebook</h3>
                <div class="form-group">
                    <a id="signIn_with_facebook" onclick="SignInFacebook(event, this);" class="btn facebook-icon"><i style="padding-right: 5px; font-size: 16px" class="fa fa-facebook"></i> Đăng nhập bằng facebook</a>
                </div>

            </div>
           <!-- <div class="form-control-or">or</div>-->
            <div class="overview-right form-control">
                <h3 class="fonts-red">Quên mật khẩu</h3>
                <div class="form-group">
                    <label>Xin vui lòng điền địa chỉ email dưới đây và chúng tôi sẽ gửi bạn hướng dẫn cài đặt lại mật mã mới</label>
                </div>
                <label style="text-align: left" class="label forget-email-text">Email</label>
                <div class="form-group">
                    <input id="forget_email" class="input" type="text" placeholder="Địa chỉ email">
                </div>
                <div class="form-group" id="forget_email_notice" style="color: #e74c3c; display: none">
                    Địa chỉ email không hợp lệ
                </div>
                <div class="form-group">
                    <input class="btn forget-password" type="button" value="Gửi">
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    $(function(){
       $('body').on('click', '.forget-password', function(){
            var email = $('#forget_email');
            var forget_email_notice = $('#forget_email_notice');
            forget_email_notice.hide();
            if(email.val() == ""){
                email.effect('highlight', {color: 'rgb(255, 182, 193)'}, 500);
                email.focus();
            }else{
                if(!validateEmail(email.val())){
                    forget_email_notice.text("Địa chỉ email không hợp lệ").show();
                }else{
                    $.ajax({
                        type:"POST",
                        url: Root_url+"login/getForgetPassword",
                        dataType:"json",
                        data:{'email': email.val()},
                        success:(function(data){
                            if(data.status == "not_found"){
                                forget_email_notice.text("Địa chỉ email không tồn tại.").show();
                            }else if(data.status == "ok"){
                                forget_email_notice.text("Bạn vui lòng kiểm tra email để nhận mật khẩu mới").show();
                            }
                        })
                    });
                }
            }
       });
    });

    $(window).load(function(){
        $.ajax({
            type:"POST",
            url: Root_url+"register/signUpFacebookUrl",
            dataType:"json",
            data:{},
            success:(function(data){
                if(data.status == "ok"){
                    var url = data.url;
                    $('#signIn_with_facebook').attr('src', url);
                }
            })
        });
    });

    function SignInFacebook(e, obj){
        e.preventDefault();
        obj = $(obj);
        var url = obj.attr('src');
        var win = popupwindow(url, 'Facebook', 450, 250);
        var timer = setInterval(function() {
            if(win.closed) {
                clearInterval(timer);
                location.reload();
            }
        }, 1000);
    }

    function popupwindow(url, title, w, h) {
        var left = (screen.width/2)-(w/2);
        var top = (screen.height/2)-(h/2);
        return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
    }

    function validateEmail(email) {
        var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(email);
    }
</script>